<template>
  <view class="custom-calendar" v-if="show">
    <!-- 当前模式提示 -->
    <!-- <view class="mode-indicator" v-if="!readonly">
      <text class="mode-text">
        {{ currentSelectMode === 'A' ? '当前模式：选择创建状态' : '当前模式：选择申请调用状态（仅在创建状态范围内）' }}
      </text>
    </view> -->

    <!-- 月份列表 -->
    <view v-for="(monthData, monthIndex) in calendarData" 
      :key="`${monthData.year}-${monthData.month}`" 
      class="calendar-month">
      
      <!-- 月份标题栏 -->
      <view v-if="showTitle" class="calendar-header">
        <text class="calendar-title">{{ monthData.year }}年{{ monthData.month }}月</text>
      </view>
      
      <!-- 星期标题 -->
      <view class="calendar-weekdays">
        <view v-for="(weekday, index) in weekDays" :key="index" class="weekday-item">
          {{ weekday }}
        </view>
      </view>
      
      <!-- 日期网格 -->
      <view class="calendar-days">
          <view 
          v-for="(day, dayIndex) in monthData.days" 
          :key="`${monthData.year}-${monthData.month}-${day.dateStr || dayIndex}`"
          class="calendar-day"
          :class="{
            'day-disabled': day.isDisabled && day.status === 'none',
            'day-other-month': !day.isCurrentMonth,
            'day-selected-a': day.status === 'A',
            'day-selected-b': day.status === 'B',
            'day-selectable-for-b': currentSelectMode === 'B' && day.status === 'A' && !day.isDisabled,
            'day-disabled-selected': day.isDisabled && (day.status === 'A' || day.status === 'B'),
            'day-empty': day.isEmpty
          }"
          @tap.stop="handleDayClick(day)"
          :style="getDayStyle(day)">
          <text v-if="!day.isEmpty" class="day-number" :style="getDayNumberStyle(day)">{{ day.date }}</text>
          <!-- 选中状态显示打钩图标 -->
          <!-- A模式下：A状态和B状态都显示打钩 -->
          <!-- B模式下：只有B状态显示打钩，A状态不显示 -->
          <view v-if="shouldShowCheckIcon(day)" class="day-check-icon">
            <FontIcon 
              name="icon-dagou" 
              :size="28" 
              :color="getCheckIconColor()" 
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import FontIcon from '@/components/FontIcon.vue'

export default {
  name: 'CustomCalendar',
  components: {
    FontIcon
  },
  props: {
    // 显示模式
    show: {
      type: Boolean,
      default: true
    },
    // 当前选择模式：'A' | 'B'
    selectMode: {
      type: String,
      default: 'A' // 'A': 选择创建状态, 'B': 选择申请调用状态（只能在创建状态范围内）
    },
    // 默认选中的日期（创建状态）
    defaultDateA: {
      type: Array,
      default: () => []
    },
    // 默认选中的日期（申请调用状态）
    defaultDateB: {
      type: Array,
      default: () => []
    },
    // 最小日期
    minDate: {
      type: String,
      default: ''
    },
    // 最大日期
    maxDate: {
      type: String,
      default: ''
    },
    // 显示月份数量
    monthNum: {
      type: Number,
      default: 7
    },
    // 创建状态颜色
    colorA: {
      type: String,
      default: '#1677FF'
    },
    // 申请调用状态颜色
    colorB: {
      type: String,
      default: '#52c41a'
    },
    // 禁用日期函数
    disabledDate: {
      type: Function,
      default: null
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 是否显示副标题
    showSubtitle: {
      type: Boolean,
      default: true
    },
    // 是否内联显示
    pageInline: {
      type: Boolean,
      default: true
    },
    // 是否只读模式（用户无法手动更改状态）
    readonly: {
      type: Boolean,
      default: false
    },
    // 业务类型 (1: 一类商家, 2: 二类商家, 3: 三类商家)
    businessType: {
      type: Number,
      default: 1
    },
    // 产品类型 (1-泛营地接待, 2-综合研学业务, 3-目的地接待, 4-组团业务, 5-研学活动)
    productType: {
      type: Number,
      default: 0
    },
    // 是否申请调用模式
    isApplyCall: {
      type: Boolean,
      default: false
    },
    // 申请截止天数（用于判断"暂不可选"状态）
    applicationDeadline: {
      type: Number,
      default: 15
    }
  },
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      selectedDatesA: [], // 创建状态选中的日期
      selectedDatesB: [], // 申请调用状态选中的日期（必须在创建状态范围内）
      calendarData: [], // 日历数据
      weekDays: ['一', '二', '三', '四', '五', '六', '日'],
      currentSelectMode: 'A' // 当前选择模式
    }
  },
  watch: {
    selectMode(newVal) {
      this.currentSelectMode = newVal;
    },
    defaultDateA: {
      immediate: true,
      handler(newVal) {
        if (Array.isArray(newVal)) {
          this.selectedDatesA = [...newVal];
        }
      }
    },
    defaultDateB: {
      immediate: true,
      handler(newVal) {
        if (Array.isArray(newVal)) {
          this.selectedDatesB = [...newVal];
        }
      }
    }
  },
  created() {
    // iOS 兼容性：在 created 钩子中初始化日历数据
    this.generateCalendarData();
  },
  mounted() {
    this.currentSelectMode = this.selectMode;
    // iOS 兼容性：使用双重 $nextTick 确保 DOM 完全渲染后再检查
    // 这样可以确保事件绑定在数据渲染完成后立即可用
    this.$nextTick(() => {
      this.$nextTick(() => {
        // 如果 calendarData 为空，立即重新生成（避免 iOS 上首次渲染时数据丢失）
        if (!this.calendarData || this.calendarData.length === 0) {
          this.generateCalendarData();
        } else {
          // 确保第一个月份的事件绑定正确
          // 通过重新生成数据来确保所有月份的事件绑定都正确
          this.generateCalendarData();
        }
      });
    });
  },
  methods: {
    // 生成日历数据
    generateCalendarData() {
      const data = [];
      const startDate = new Date(this.currentYear, this.currentMonth - 1, 1);
      
      for (let i = 0; i < this.monthNum; i++) {
        const year = startDate.getFullYear();
        const month = startDate.getMonth() + 1;
        const days = this.generateMonthDays(year, month);
        
        data.push({
          year,
          month,
          days
        });
        
        // 移动到下一个月
        startDate.setMonth(startDate.getMonth() + 1);
      }
      
      // 直接赋值，Vue 会自动处理响应式更新
      this.calendarData = data;
    },
    
    // 生成单月日期数据
    generateMonthDays(year, month) {
      const days = [];
      const firstDay = new Date(year, month - 1, 1);
      // 将 getDay() 的结果转换为周一开始的索引（0=周一，6=周日）
      // getDay() 返回 0-6（0=周日，1=周一，...，6=周六）
      // 转换后：0=周一，1=周二，...，5=周六，6=周日
      const firstDayWeek = (firstDay.getDay() + 6) % 7;
      const lastDay = new Date(year, month, 0);
      const daysInMonth = lastDay.getDate();
      
      // 在当月日期之前添加空占位符，使日期对齐到正确的星期位置
      for (let i = 0; i < firstDayWeek; i++) {
        days.push({
          year: null,
          month: null,
          date: null,
          dateStr: '',
          isCurrentMonth: false,
          isDisabled: true,
          status: 'none',
          isEmpty: true // 标记为空占位符
        });
      }
      
      // 只填充当前月的日期
      for (let day = 1; day <= daysInMonth; day++) {
        const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        days.push({
          year,
          month,
          date: day,
          dateStr,
          isCurrentMonth: true,
          isDisabled: this.isDateDisabled(year, month, day),
          status: this.getDateStatus(year, month, day)
        });
      }
      
      return days;
    },
    
    // 获取日期状态（申请调用状态优先显示，因为申请调用状态是创建状态的子集）
    getDateStatus(year, month, date) {
      const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
      // 申请调用状态优先（申请调用状态是创建状态的子集，显示绿色）
      if (this.selectedDatesB.includes(dateStr)) {
        return 'B';
      }
      // 创建状态（显示蓝色）
      if (this.selectedDatesA.includes(dateStr)) {
        return 'A';
      }
      return 'none';
    },
    
    // 判断日期是否禁用
    isDateDisabled(year, month, date) {
      const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')}`;
      
      // 检查最小日期
      if (this.minDate && dateStr < this.minDate) {
        return true;
      }
      
      // 检查最大日期
      if (this.maxDate && dateStr > this.maxDate) {
        return true;
      }
      
      // 使用自定义禁用函数
      if (this.disabledDate && typeof this.disabledDate === 'function') {
        return this.disabledDate({ year, month, date });
      }
      
      return false;
    },
    
    // 根据日期字符串判断是否禁用
    isDateDisabledByStr(dateStr) {
      if (!dateStr) {
        return false;
      }
      
      // 解析日期字符串
      const dateParts = dateStr.split('-');
      if (dateParts.length !== 3) {
        return false;
      }
      
      const year = parseInt(dateParts[0]);
      const month = parseInt(dateParts[1]);
      const date = parseInt(dateParts[2]);
      
      return this.isDateDisabled(year, month, date);
    },
    
    // 处理日期点击
    handleDayClick(dayItem) {
      // 如果是空日期，直接返回
      if (!dayItem || dayItem.isEmpty) {
        return;
      }
      
      // 只读模式下，禁止用户手动更改
      if (this.readonly) {
        return;
      }
      
      const { dateStr, status, isDisabled } = dayItem;
      
      // 判断是否允许选中（一类商家的泛营期设置，二类商家的综合研学与目的地接待只能取消选中，不能选中）
      // 只有当 businessType 和 productType 都明确匹配时才进入限制模式
      // 注意：productType 必须大于 0 才参与判断，避免默认值 0 导致误判
      const isRestrictedMode = (this.businessType === 1 && this.productType === 1) || 
                               (this.businessType === 2 && this.productType > 0 && (this.productType === 2 || this.productType === 3));
      
      // 如果日期是禁用的
      if (isDisabled) {
        // B模式（二类商家申请调用模式）：如果日期被禁用，完全禁止点击，即使日期在选中列表中也不允许操作
        // 因为B模式需要确保"当前日期 + applicationDeadline"那天（25号）不可选
        const isBMode = this.businessType === 2 && this.isApplyCall && this.currentSelectMode === 'B';
        
        if (isBMode) {
          // B模式：完全禁止点击被禁用的日期，即使日期在选中列表中也不允许操作
          return;
        }
        
        // 限制模式下，如果日期已被选中，允许点击来取消选中
        if (isRestrictedMode && (status === 'A' || status === 'B')) {
          // 允许取消选中，继续处理
        } else if (status === 'A' || status === 'B') {
          // 如果日期已被选中（A或B状态），即使被禁用，也允许点击来取消选中
          // 这对于从 periodCreate 进入的情况很重要，因为所有日期都应该是可操作的
        } else {
          // 其他情况，禁用日期不处理
          return;
        }
      }
      
      // 根据当前选择模式处理
      // 二类组团业务且是申请调用模式且允许编辑时，在A模式下只能操作B状态（添加/删除B状态）
      // 注意：这里需要从父组件传递 isApplyCall，但如果没有传递，我们通过其他方式判断
      // 在A模式下，如果日期已经是B状态，可以点击来移除B状态；如果日期是A状态但不是B状态，可以点击来添加B状态
      if (this.currentSelectMode === 'A') {
        // 创建状态模式：选择创建状态
        // 如果是二类组团业务且是申请调用模式，在A模式下可以操作B状态
        if (this.businessType === 2 && this.productType === 4 && !this.readonly) {
          // 在A模式下，如果日期是B状态，点击移除B状态；如果是A状态但不是B状态，点击添加B状态
          if (status === 'B') {
            // 移除B状态
            this.handleSelectB(dateStr, 'B');
          } else if (status === 'A') {
            // 添加B状态
            this.handleSelectB(dateStr, 'A');
          } else {
            // 其他状态，不允许操作
            return;
          }
        } else {
          // 其他情况，正常处理A状态
          this.handleSelectA(dateStr, status);
        }
      } else if (this.currentSelectMode === 'B') {
        // 申请调用状态模式：选择申请调用状态（只能在创建状态范围内）
        this.handleSelectB(dateStr, status);
      }
      
      // 更新日历数据
      this.updateCalendarStatus();
      
      // 触发变化事件
      this.$emit('change', [...this.selectedDatesA], [...this.selectedDatesB]);
    },
    
    // 创建状态模式：处理创建状态选择
    handleSelectA(dateStr, currentStatus) {
      // 判断是否允许选中（一类商家的泛营期设置，二类商家的综合研学与目的地接待）
      // 限制模式：对于已禁用的日期，只能取消选中，不能选中
      // 只有当 businessType 和 productType 都明确匹配时才进入限制模式
      // 注意：productType 必须大于 0 才参与判断，避免默认值 0 导致误判
      const isRestrictedMode = (this.businessType === 1 && this.productType === 1) || 
                               (this.businessType === 2 && this.productType > 0 && (this.productType === 2 || this.productType === 3));
      
      // 检查日期是否禁用
      const isDateDisabled = this.isDateDisabledByStr(dateStr);
      
      if (currentStatus === 'none') {
        // 未选中 -> 如果是限制模式且日期已禁用，不允许选中；否则添加到创建状态
        if (isRestrictedMode && isDateDisabled) {
          return; // 限制模式下，已禁用的日期不允许选中
        }
        // 非限制模式或非禁用日期，正常添加
        if (!this.selectedDatesA.includes(dateStr)) {
          this.selectedDatesA.push(dateStr);
          this.$emit('dayClick', dateStr, 'A', 'added');
        }
      } else if (currentStatus === 'A') {
        // 创建状态 -> 取消选中（从创建状态中移除，如果申请调用状态中有也移除，因为申请调用状态必须在创建状态范围内）
        const indexA = this.selectedDatesA.indexOf(dateStr);
        if (indexA > -1) {
          this.selectedDatesA.splice(indexA, 1);
        }
        const indexB = this.selectedDatesB.indexOf(dateStr);
        if (indexB > -1) {
          this.selectedDatesB.splice(indexB, 1);
        }
        this.$emit('dayClick', dateStr, 'none', 'removed');
      } else if (currentStatus === 'B') {
        // 申请调用状态 -> 取消申请调用状态，回到创建状态（从申请调用状态中移除，保留在创建状态中，因为申请调用状态是创建状态的子集）
        const indexB = this.selectedDatesB.indexOf(dateStr);
        if (indexB > -1) {
          this.selectedDatesB.splice(indexB, 1);
        }
        // 确保在创建状态中（申请调用状态的日期必须在创建状态中）
        if (!this.selectedDatesA.includes(dateStr)) {
          this.selectedDatesA.push(dateStr);
        }
        this.$emit('dayClick', dateStr, 'A', 'b-to-a');
      }
    },
    
    // 申请调用状态模式：处理申请调用状态选择（只能在创建状态范围内，申请调用状态是创建状态的子集）
    handleSelectB(dateStr, currentStatus) {
      // 判断是否允许选中（一类商家的泛营期设置，二类商家的综合研学与目的地接待）
      // 限制模式：对于已禁用的日期，只能取消选中，不能选中
      // 只有当 businessType 和 productType 都明确匹配时才进入限制模式
      // 注意：productType 必须大于 0 才参与判断，避免默认值 0 导致误判
      const isRestrictedMode = (this.businessType === 1 && this.productType === 1) || 
                               (this.businessType === 2 && this.productType > 0 && (this.productType === 2 || this.productType === 3));
      
      // 检查日期是否禁用
      const isDateDisabled = this.isDateDisabledByStr(dateStr);
      
      // 申请调用状态模式只能操作创建状态的日期
      if (currentStatus === 'A') {
        // 对于B模式（二类商家申请调用模式），如果日期被禁用，不允许选中为B状态
        // 即使日期在A状态中（在班期列表中），也要根据 applicationDeadline 判断是否可选
        if (this.businessType === 2 && this.isApplyCall && isDateDisabled) {
          // B模式下，已禁用的日期不允许选中为B状态
          return;
        }
        
        // 创建状态 -> 申请调用状态（添加到申请调用状态，保留在创建状态中，因为申请调用状态是创建状态的子集）
        // 如果是限制模式且日期已禁用，不允许选中
        // 但是，对于"二类组团业务"从"申请调用"进入的情况，日期已经在班期列表中（A状态），应该允许选中为B状态
        // 所以，如果日期已经在 selectedDatesA 中（说明在班期列表中），即使被标记为禁用，也应该允许选中为B状态
        if (isRestrictedMode && isDateDisabled && !this.selectedDatesA.includes(dateStr)) {
          return; // 限制模式下，已禁用的日期不允许选中（除非日期已经在A状态中）
        }
        // 非限制模式或非禁用日期，或者日期已经在A状态中，正常添加
        if (!this.selectedDatesB.includes(dateStr)) {
          this.selectedDatesB.push(dateStr);
        }
        // 确保在创建状态中（申请调用状态的日期必须在创建状态中）
        if (!this.selectedDatesA.includes(dateStr)) {
          this.selectedDatesA.push(dateStr);
        }
        this.$emit('dayClick', dateStr, 'B', 'a-to-b');
      } else if (currentStatus === 'B') {
        // 申请调用状态 -> 创建状态（从申请调用状态移除，保留在创建状态中）
        const indexB = this.selectedDatesB.indexOf(dateStr);
        if (indexB > -1) {
          this.selectedDatesB.splice(indexB, 1);
        }
        // 确保在创建状态中
        if (!this.selectedDatesA.includes(dateStr)) {
          this.selectedDatesA.push(dateStr);
        }
        this.$emit('dayClick', dateStr, 'A', 'b-to-a');
      } else if (currentStatus === 'none') {
        // 申请调用状态模式下，点击未选中的日期无效（提示用户）
        uni.showToast({
          title: '请先选择创建状态日期',
          icon: 'none',
          duration: 2000
        });
      }
    },
    
    // 更新日历中所有日期的状态
    updateCalendarStatus() {
      this.calendarData.forEach(monthData => {
        monthData.days.forEach(day => {
          day.isDisabled = this.isDateDisabled(day.year, day.month, day.date);
          day.status = this.getDateStatus(day.year, day.month, day.date);
        });
      });
    },
    
    // 判断日期是否为过期不可选（已过期）
    isDateExpired(dateStr) {
      if (!dateStr) return false;
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const date = new Date(dateStr);
      date.setHours(0, 0, 0, 0);
      return date < today;
    },
    
    // 判断日期是否为暂不可选（applicationDeadline限制）
    isDateTemporarilyDisabled(dateStr) {
      if (!dateStr) return false;
      // 如果已过期，不算暂不可选
      if (this.isDateExpired(dateStr)) return false;
      
      const now = new Date();
      const deadlineDays = this.applicationDeadline || 15;
      const deadlineTime = new Date(now);
      deadlineTime.setDate(now.getDate() + deadlineDays);
      
      const periodDate = new Date(dateStr);
      periodDate.setHours(0, 0, 0, 0);
      deadlineTime.setHours(0, 0, 0, 0);
      
      // 如果日期在 deadlineTime 之前，则为暂不可选
      return periodDate <= deadlineTime;
    },
    
    // 判断是否应该显示打钩图标
    shouldShowCheckIcon(day) {
      // A模式下：A状态和B状态都显示打钩
      if (this.currentSelectMode === 'A') {
        return day.status === 'A' || day.status === 'B';
      }
      // B模式下：只有B状态显示打钩，A状态不显示
      else if (this.currentSelectMode === 'B') {
        return day.status === 'B';
      }
      return false;
    },
    
    // 判断是否应该显示选中边框
    shouldShowSelectedBorder(day) {
      // A模式下：A状态和B状态都显示边框
      if (this.currentSelectMode === 'A') {
        return day.status === 'A' || day.status === 'B';
      }
      // B模式下：只有B状态显示边框，A状态不显示
      else if (this.currentSelectMode === 'B') {
        return day.status === 'B';
      }
      return false;
    },
    
    // 获取日期样式
    getDayStyle(day) {
      // 空占位符不需要样式
      if (day.isEmpty) {
        return {};
      }
      
      const dateStr = day.dateStr;
      const isExpired = this.isDateExpired(dateStr);
      const isTemporarilyDisabled = this.isDateTemporarilyDisabled(dateStr);
      const shouldShowBorder = this.shouldShowSelectedBorder(day);
      const isSelected = day.status === 'A' || day.status === 'B';
      
      const style = {};
      
      // B模式下：如果日期不在A状态中（不在外层班期列表中），显示透明
      if (this.currentSelectMode === 'B' && day.status === 'none' && !isExpired) {
        style.backgroundColor = 'transparent';
      }
      // 不可选中（过期不可选）：透明
      else if (isExpired && !isSelected) {
        style.backgroundColor = 'transparent';
      }
      // B模式下：如果日期被禁用（applicationDeadline限制），即使日期在A状态中，也显示透明
      else if (this.currentSelectMode === 'B' && day.isDisabled && day.status === 'A') {
        style.backgroundColor = 'transparent';
      }
      // 暂不可选（applicationDeadline限制）：透明
      else if (isTemporarilyDisabled && !isSelected && day.isDisabled) {
        style.backgroundColor = 'transparent';
      }
      // 可选或选中：白底
      else {
        style.backgroundColor = '#ffffff';
        // 可选中和已选中都添加右下角阴影（根据图片调整，阴影更明显）
        style.boxShadow = '2rpx 2rpx 6rpx rgba(0, 0, 0, 0.15)';
      }
      
      // 选中状态：添加边框（根据模式判断）
      // 未选中和不可选中状态不需要边框
      if (shouldShowBorder) {
        const borderColor = this.getCheckIconColor();
        style.border = `2rpx solid ${borderColor}`;
      } else {
        // 未选中和不可选中状态：无边框
        style.border = 'none';
      }
      
      return style;
    },
    
    // 获取日期数字样式
    getDayNumberStyle(day) {
      const dateStr = day.dateStr;
      const isExpired = this.isDateExpired(dateStr);
      const isTemporarilyDisabled = this.isDateTemporarilyDisabled(dateStr);
      const isSelected = day.status === 'A' || day.status === 'B';
      const shouldShowBorder = this.shouldShowSelectedBorder(day);
      
      const style = {};
      
      // B模式下：如果日期不在A状态中（不在外层班期列表中），显示黑字
      if (this.currentSelectMode === 'B' && day.status === 'none' && !isExpired) {
        style.color = '#000000';
      }
      // 不可选中（过期不可选）：灰字
      else if (isExpired && !isSelected) {
        style.color = '#cacbcd';
      }
      // B模式下：如果日期被禁用（applicationDeadline限制），即使日期在A状态中，也显示申请调用时对方的颜色（productType）
      // 25号这类：A模式选中，但在B模式下已经过期，应该显示为透明底 + 申请调用时对方的颜色（productType）
      else if (this.currentSelectMode === 'B' && day.isDisabled && day.status === 'A') {
        style.color = this.getSelectableTextColor(); // 使用申请调用时对方的颜色（根据productType判断）
      }
      // 暂不可选（applicationDeadline限制）：黑字
      else if (isTemporarilyDisabled && !isSelected && day.isDisabled) {
        style.color = '#000000';
      }
      // 可选状态：根据 isApplyCall 和 productType 设置颜色
      else if (!isSelected && !day.isDisabled) {
        if (this.isApplyCall) {
          // 申请调用情况：根据 productType 设置颜色
          style.color = this.getSelectableTextColor();
        } else {
          // 创建情况：黑字
          style.color = '#333333';
        }
      }
      // B模式下选中状态（B状态）：保持原色（根据 productType）
      else if (this.currentSelectMode === 'B' && day.status === 'B' && shouldShowBorder) {
        if (this.isApplyCall) {
          // 申请调用情况：根据 productType 设置颜色（保持原色）
          style.color = this.getSelectableTextColor();
        } else {
          // 创建情况：黑字
          style.color = '#333333';
        }
      }
      // A模式下选中状态：根据 businessType 设置颜色
      else if (this.currentSelectMode === 'A' && shouldShowBorder) {
        style.color = this.getCheckIconColor();
      }
      // A状态在B模式下：保持可选状态的颜色
      else if (day.status === 'A' && this.currentSelectMode === 'B' && !day.isDisabled) {
        if (this.isApplyCall) {
          style.color = this.getSelectableTextColor();
        } else {
          style.color = '#333333';
        }
      }
      // 其他情况：默认黑字
      else {
        style.color = '#333333';
      }
      
      return style;
    },
    
    // 获取可选状态文字颜色（根据 productType）
    getSelectableTextColor() {
      if (this.productType === 1) {
        return '#0081ff'; // 一类商家：蓝色
      } else if (this.productType === 2 || this.productType === 3 || this.productType === 4) {
        return '#39B54A'; // 二类商家：绿色
      } else if (this.productType === 5) {
        return '#FBBD08'; // 三类商家：黄色
      }
      return '#333333'; // 默认黑字
    },
    
    // 获取打钩图标颜色（根据 businessType）
    getCheckIconColor() {
      if (this.businessType === 1) {
        return '#0081ff'; // 一类商家：蓝色
      } else if (this.businessType === 2) {
        return '#39B54A'; // 二类商家：绿色
      } else if (this.businessType === 3) {
        return '#FBBD08'; // 三类商家：黄色
      }
      return '#1677FF'; // 默认蓝色
    },
    
    // 上一月
    prevMonth() {
      const date = new Date(this.currentYear, this.currentMonth - 1, 1);
      date.setMonth(date.getMonth() - 1);
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.generateCalendarData();
      this.$emit('monthChange', this.currentYear, this.currentMonth);
    },
    
    // 下一月
    nextMonth() {
      const date = new Date(this.currentYear, this.currentMonth - 1, 1);
      date.setMonth(date.getMonth() + 1);
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.generateCalendarData();
      this.$emit('monthChange', this.currentYear, this.currentMonth);
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-calendar {
  width: 100%;
  background-color: #EDEDED;
}

// 模式提示
.mode-indicator {
  padding: 20rpx;
  background-color: #f0f7ff;
  border-left: 4rpx solid #1677FF;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.mode-text {
  font-size: 28rpx;
  color: #1677FF;
  font-weight: 500;
}

.calendar-month {
  margin-bottom: 40rpx;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.calendar-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.weekday-item {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8rpx;
  padding: 20rpx 10rpx;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  position: relative;
  transition: all 0.2s ease;
  min-height: 80rpx;
  cursor: pointer;
  overflow: hidden;
  /* iOS 兼容性：确保在旧版 iOS 上也有最小高度 */
  height: auto;
  /* 确保点击事件正常工作 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  
  .day-number {
    font-size: 28rpx;
    z-index: 1;
    font-weight: 500;
  }
  
  .day-check-icon {
    position: absolute;
    bottom: -6rpx;
    right: -6rpx;
    z-index: 2;
    width: 32rpx;
    height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  
  // 其他月份的日期
  &.day-other-month {
    .day-number {
      color: #ccc;
    }
  }
  
  // 空占位符（用于对齐日期到正确的星期位置）
  &.day-empty {
    visibility: hidden;
    pointer-events: none;
    /* 确保在 iOS 上也能正确隐藏 */
    opacity: 0;
    height: 0;
    padding-bottom: 0;
  }
  
  // 禁用日期（未选中状态）- 过期不可选
  &.day-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }
  
  // 禁用但已选中的日期（限制模式下允许取消选中）
  &.day-disabled-selected {
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.7; // 降低透明度表示已禁用
  }
  
  // A状态和B状态现在使用边框+打钩，不再使用背景色
  // 背景色和边框由 getDayStyle 动态设置
  
  // B模式下，A状态的日期可切换提示
  &.day-selectable-for-b {
    border: 2rpx dashed #52c41a;
    // animation: pulse 2s infinite;
  }
  
  // 点击效果
  &:active:not(.day-disabled) {
    transform: scale(0.95);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
</style>

